<template>
    <div class="container">
        <!-- @input="searchInput"
            v-model="searchText" -->
        <!-- 搜索框内容 -->
        <div class="search-box">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <input
                class="search-input"
                confirm-type="search"
                placeholder="搜索客户名称"
                placeholder-style="color: #9EA1BB;letter-spacing:2rpx;"
            />
        </div>
        <div class="content">
            <!-- 盒子左边 -->
            <div class="content-left">
                <div class="grapheme">A</div>
                <div class="content-message">
                    <view class="row">
                        <radio :checked="false" style="transform:scale(0.7)" />
                        <div>
                            <div class="appellation">
                                艾爱丽
                                <image
                                    class="appellation-image"
                                    src="/static/find-customers/male.png"
                                />
                                <!-- <image class="appellation-image" src="/static/find-customers/female.png" /> -->
                            </div>
                            <div class="establishment">郑州富士康科技有限公司</div>
                        </div>
                    </view>
                    <image
                        class="ring"
                        src="/static/find-customers/shout.png"
                    />
                </div>
                <div class="grapheme">B</div>
                <div class="content-message">
                    <view class="row">
                        <radio :checked="false" style="transform:scale(0.7)" />
                        <div>
                            <div class="appellation">
                                艾爱丽
                                <image
                                    class="appellation-image"
                                    src="/static/find-customers/male.png"
                                />
                                <!-- <image class="appellation-image" src="/static/find-customers/female.png" /> -->
                            </div>
                            <div class="establishment">郑州富士康科技有限公司</div>
                        </div>
                    </view>

                    <div class="starboard">
                        <image
                            class="ring"
                            src="/static/find-customers/shout.png"
                        />
                        <div class="amputate">
                            <image
                                class="cut-off"
                                src="/static/find-customers/strike-out.png"
                            />
                                删除
                        </div>
                    </div>
                </div>
            </div>
            <!-- 盒子右边 -->
            <div class="content-right">
                <div class="letter">
                    <div
                        :class="[
                            'worker-letter',
                            letterIndex == index ? 'letter-active' : ''
                        ]"
                        v-for="(item, index) in letter"
                        :key="index"
                        @click="selectLetter(index)"
                    >
                        {{ item }}
                    </div>
                </div>
            </div>
        </div>
        <button class="reconStruction">新建联系人</button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
/* 字母表 */
const letter = ref([
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'E',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z',
    '#'
])

const letterIndex = ref(0)
const selectLetter = (index: number) => {
    letterIndex.value = index
}
</script>
<style lang="scss" scoped>
.just-image-active {
    transform: rotateX(-180deg);
}
.search-box {
    @include padding(0);
    background: #fafafc;
    overflow: hidden;
    margin: 30rpx 30rpx 0 30rpx;
}
.search-input {
    background: #fafafc;
}
.content {
    display: flex;
    padding: 0 0rpx 0 30rpx;
    .grapheme {
        width: 16rpx;
        font-size: $font-base;
        font-weight: 400;
        color: #565868;
        padding-top: 30rpx;
    }
    .content-message {
        @include flex-between;
        box-sizing: border-box;
        justify-content: space-between;
        width: 670rpx;
        background: #ffffff;
        padding: 30rpx 30rpx 30rpx 0;
        opacity: 1;
        border-bottom: 1rpx solid #f4f4f7;
        .appellation {
            display: flex;
            align-items: flex-end;
            font-size: $font-medium;
            font-weight: bold;
            color: $black;
            padding: 0 0 24rpx 0;
        }
        .appellation-image {
            width: $font-medium;
            height: $font-medium;
            padding: 0 30rpx 0 12rpx;
        }
        .starboard{
            display: flex;
            align-items: center;
        }
        .establishment {
            font-size: $font-base;
            color: #565868;
        }
        .ring {
            width: 60rpx;
            height: 60rpx;
        }
    }
}
.amputate {
    margin-left: 30rpx;
    width: 129rpx;
    height: 139rpx;
    background: #ff7642;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #FFF;
    .cut-off{
        width: 68rpx;
        height: 68rpx;
        transform: rotate(180deg);
    }
    .cut-out{
        color: #FFF;
        font-size: $font-small;
    }
}
.content-right {
    .worker-letter {
        font-size: $font-normal;
        margin-left: 10rpx;
        text-align: center;
    }
    .letter-active {
        width: 36rpx;
        height: 36rpx;
        background: $black;
        border-radius: 100rpx;
        color: #ffffff;
        line-height: 36rpx;
        text-align: center;
    }
}
.reconStruction {
    width: 690rpx;
    height: 88rpx;
    background: $blue;
    border-radius: 44rpx;
    color: #fff;
    line-height: 88rpx;
    margin: 30rpx auto 68rpx auto;
    position: fixed;
    left: 30rpx;
    bottom: -25px;
}
</style>
